<script>
import {Back} from "@element-plus/icons-vue";

export default {
  components: {Back},
  data() {
    return {
      hello: "",
      status: "login",
    };
  },
  mounted() {
    setInterval(() => {
      this.getCurrentUrl()
    }, 100)
  },
  methods: {
    getCurrentUrl() {
      // console.log(window.location.href)
      const href = window.location.href
      if (href.endsWith("/home")) {
        this.status = "home"
      }

      if (href.endsWith("/new")) {
        this.status = "new"
      }

      if (href.indexOf("/collect") > -1) {
        this.status = "collect"
      }

      if (href.indexOf("/list") > -1) {
        this.status = "list"
      }

      if (href.indexOf("/share") > -1) {
        this.status = "share"
      }

      if (href.indexOf("/trash") > -1) {
        this.status = "trash"
      }

    },
    toTrashBin() {
      this.$router.push({
        path: "trash",
        query: {}
      })
    },
    click() {
    },
    newQuestion() {
      this.$router.push({
        name: "new"
      })
    },
    backToHome() {
      this.$router.back()
    },
    loginOut() {
      localStorage.token = ""
      this.status = "login"
      this.$router.push({path: '/login', replace: true})
    }
  },
};
</script>

<template>
  <div v-if="status!=='collect'&&status!=='share'"
       class="w-full bg-gray-100 text-black flex justify-center items-center h-20 border-gray-200 border-b font-bold">
    <div v-if="status==='login'" class="h-20 flex items-center justify-center">请登录问卷系统</div>
    <div v-if="status==='home'" class="flex items-center justify-between w-full px-4 h-20">
      <div class="flex items-center">
        <el-popconfirm width="220"
                       hide-icon="true"
                       confirm-button-text="是"
                       cancel-button-text="否"
                       confirm-button-type="info"
                       title="是否确认退出登录？" @confirm="loginOut()">
          <template #reference>
            <img src="../assets/img/logo.png" class="w-14 h-14 mix-blend-darken" alt="">
          </template>
        </el-popconfirm>
        <div class="font-bold ml-3 text-xl hidden sm:block">翰林苑问卷系统</div>
      </div>
      <div class="flex items-center logout_btn">

        <div @click="toTrashBin()" class="mr-5 text-gray-500 cursor-pointer select-none hover:opacity-50">
          回收站
        </div>
        <div @click="newQuestion()"
             class=" px-5 py-2.5 text-white rounded-full hover:opacity-50 cursor-pointer select-none"
             style="background: #0e1ad5">+新建问卷
        </div>
      </div>
    </div>

    <div v-if="status==='new'||status==='trash'" class="flex items-center justify-between w-full px-4 h-20">
      <div @click="backToHome()" class="flex items-center cursor-pointer hover:opacity-50 select-none">
        <el-icon size="20px">
          <Back/>
        </el-icon>
        <div class="font-bold ml-3 text-xl">返回</div>
      </div>
    </div>

    <div v-if="status==='list'" class="flex items-center justify-between w-full px-4 h-20">
      <div @click="backToHome()" class="flex items-center cursor-pointer hover:opacity-50 select-none">
        <el-icon size="20px">
          <Back/>
        </el-icon>
        <div class="font-bold ml-3 text-xl">返回</div>
      </div>
    </div>

  </div>
</template>

<style scoped>
</style>
